<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>设备维护统计</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link href="/static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/index_s.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link href="/static/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/public.css">
    <!--日期-->
    <link rel="stylesheet" href="/static/plugins/jedate/jedate.css">
    <link href="/static/css/loss_Statistics.css" rel="stylesheet">
    <style>
        .police-title{
            text-align: center;
            margin-top: 40px;
        }
    </style>
</head>
<body style="background-color:#eee">
<div id="box" style="background: #fff;width:100%;height: 100%;margin: 10px;">
    <div style="overflow: hidden;height: 50px;line-height: 50px;border-bottom: 1px solid #ccc">
        <div style="margin-top: 10px;padding-left: 10px;">
            <label class="manage-title">选择日期：</label>
            <input class="form-control form-manage" id="startDate" placeholder="开始日期" style="width: 270px;margin-right: 40px;">
            <input class="form-control form-manage" id="endDate" placeholder="结束日期" style="width: 270px;margin-right: 30px">
            <button type="submit" class="btn btn-primary" style="float: left;">提交</button>
        </div>
    </div>
    <div class="contentBox">
        <div class="col-xs-6">
            <h4 class="police-title">设备类型维护统计</h4>
            <div class="top-chart" id="equipmentAlarm" style="width:100%;height: 600px;"></div>
        </div>
        <div class="col-xs-6">
            <h4 class="police-title">设备维护统计</h4>
            <div class="top-chart" id="typeData" style="width: 100%;height: 600px;"></div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="/static/js/jquery.min.js"></script>

<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/js/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script src="/static/js/vue.min.js"></script>
<!--bootstrap-tree-->
<script src="/static/plugins/bootstrap-tree/bootstrap-treeview.js"></script>
<!--日期-->
<script src="/static/plugins/jedate/jedate.js"></script>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            equipment:'',           //设备
            overpressureAlarm:'',      //超压报警
            flatFailure:'',            //变频故障
            anhydrousAlarm:'',          //无水报警
        }
    });
    //起始日期定义
    var start = {
        dateCell: '#startDate',
        format: 'YYYY-MM-DD hh:mm',
        choosefun: function(datas){
            end.minDate = datas; //开始日选好后，重置结束日的最小日期
            jeDate(end);
        }
    };
    var end = {
        dateCell: '#endDate',
        format: 'YYYY-MM-DD hh:mm',
        choosefun: function(datas){
            start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
        }
    };
    jeDate(start);
    jeDate(end);

    vm.equipment=78;
    var equipmentAlarm = echarts.init(document.getElementById('equipmentAlarm'));
    var data = [
        {
            value:vm.equipment,
            name: '超压补偿式无负压供水设备(ZWG)'
        }
    ];
    option = {
        backgroundColor: '#fff',
        title: {
            text: '总数量：'+vm.equipment,
            subtext: '',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 16
            }
        },
        tooltip: {
            show: true,
            trigger: 'item',
            formatter: "{c}"
        },
        legend: {
            orient: 'horizontal',
            x:'left',
            y:'bottom',
            data: ['超压补偿式无负压供水设备(ZWG)']
        },
        series: [{
            type: 'pie',
            selectedMode: 'single',
            radius: ['25%', '58%'],
            color: ['#f55433'],
            label: {
                normal: {
                    position: 'inner',
                    formatter: '{d}%',
                    textStyle: {
                        color: '#fff',
                        fontWeight: 'bold',
                        fontSize: 14
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: data
        }, {
            type: 'pie',
            radius: ['58%', '83%'],
            itemStyle: {
                normal: {
                    color: '#F2F2F2'
                },
                emphasis: {
                    color: '#ADADAD'
                }
            },
            label: {
                normal: {
                    position: 'inner',
                    formatter: '{c}条',
                    textStyle: {
                        color: '#777777',
                        fontWeight: 'bold',
                        fontSize: 14
                    }
                }
            },
            data: data
        }]
    };
    equipmentAlarm.setOption(option);
    var typeData = echarts.init(document.getElementById('typeData'));
    vm.overpressureAlarm = 45 ;
    vm.flatFailure =  12;
    vm.anhydrousAlarm =  1;
    var total=vm.overpressureAlarm+vm.flatFailure+vm.anhydrousAlarm;
    var type = [
        {
            value:vm.overpressureAlarm ,
            name: '超压报警'
        },{
            value:vm.flatFailure ,
            name: '1#变频器故障'
        },{
            value:vm.anhydrousAlarm ,
            name: '无水报警'
        }
    ];
    typeOption = {
        backgroundColor: '#fff',
        title: {
            text: '总数量：'+total,
            subtext: '',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 16
            }
        },
        tooltip: {
            show: true,
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            data: ['超压报警', '1#变频器故障', '无水报警'],
            x : 'left',
            y:'bottom'

        },
        series: [{
            type: 'pie',
            selectedMode: 'single',
            radius: ['25%', '58%'],
            color: ['#659ad5', '#d65349', '#2990f3'],
            label: {
                normal: {
                    position: 'inner',
                    formatter: '{d}%',
                    textStyle: {
                        color: '#fff',
                        fontWeight: 'bold',
                        fontSize: 14
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: type
        }, {
            type: 'pie',
            radius: ['58%', '83%'],
            itemStyle: {
                normal: {
                    color: '#F2F2F2'
                },
                emphasis: {
                    color: '#ADADAD'
                }
            },
            label: {
                normal: {
                    position: 'inner',
                    formatter: '{c}条',
                    textStyle: {
                        color: '#777777',
                        fontWeight: 'bold',
                        fontSize: 14
                    }
                }
            },
            data: type
        }]
    };
    typeData.setOption(typeOption);
    $(document).ready(function () {

    })
</script>
</body>
</html>